<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>

    <link rel="stylesheet" href="/static/css/personal.css">
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="/static/images/logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="/static/css/dailog.css">
    <link rel="stylesheet" href="/static/css/topic.css">


    <!--引用外部js文件-->
    <script src="/static/js/index.js"></script>


</head>
<body>
<header>
    <div class="header-inner">
        <div>
            <img src="/static/images/logo.png" alt="" width="64" height="29">
        </div>
        <div class="menu">
            <a href="#">首页</a>
            <a href="#">发现</a>
            <a href="/app1/topic/">话题</a>
        </div>
        <div class="search">
            <input class="search-input1" type="text" placeholder="搜索你感兴趣的内容..."/>
            <div class="search-input2"></div>
        </div>

        <!--点击提问按钮时产生单击事件，调用quiz函数-->
        <div class="btnwen" onclick="quiz()">提问</div>
        <div
                class="info">
            <a href="#" class="userinfo">
                <img src="/static/images/userinfoes2.jpg"/>
            </a>
        </div>
        <div>
            <a href="/app1/login/" class="userquit">退出</a>
        </div>
    </div>
</header>

<div class="main">
    <div class="cover">
        <div class="usercover"></div>
        <div class="editusercover"><i class="fa fa-camera" aria-hidden="true"></i> 编辑封面图片</div>
    </div>

    <div class="personalinfo">
        <div class="photo" style="background-image: url('{{ user_photo|default:'/static/images/userinfo.jpg'}}')"></div>
        <div class="intruduce">
            <h2 style="display: inline-block; margin-right: 20px">
                {{ user_name }}
            </h2>
            <span class="intrspan">{{ user_lable }}</span>
            <div id="bian" style="height:50px; overflow:hidden;">
                <div class="zhuanye">{{ user_industry }}</div>
                <div class="xueli">{{ user_education }}　|　{{ user_profession }}</div>
            </div>
            <div class="detail">
                <span class="view">查看详细资料</span>
            </div>
        </div>
        <div class="editinfo" onclick="openEdit()">
            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>编辑个人资料</div>
    </div>

    <div class="column">
        <ul class="tabs">
            <li class="tabsli active" onmouseup="sel(this)">动态</li>
            <li class="tabsli" onmouseup="sel(this)">回答</li>
            <li class="tabsli" onmouseup="sel(this)">分享</li>
            <li class="tabsli" onmouseup="sel(this)"><a href="/app1/dpquestion/">回答</a>提问</li>
            <li class="tabsli" onmouseup="sel(this)">收藏</li>
            <li class="tabsli" onmouseup="sel(this)">关注</li>
        </ul>
            <div class="dongtai" id="dongtai">
            <h4>我的动态</h4>
            </div>
            <div class="quizContainer" id="quizContainer">
                {% comment %}{% for q in p_question %}{% endcomment %}
                <div class="listitem">
                    <h2>
                        <a id="title">123</a>
                    </h2>
                    <div class="expandable">
                        <div class="zan" id="zan" onclick="add_zan(this)">{{ q.q_zan }}</div>
                        <div class="">
                            <span class="summary-wrapper">
                                <span class="author-link-line"><a>{{ q.q_create_time }}</a></span>
                                <br>
                                <span class="wangming" title="quiz.userContent"></span>
                                </span>
                            <div class="article">
                                <span class="a">{{ q.q_content }}</span>
                                <a href="#" class="toggle-expand b">显示全部</a>
                            </div>
                            <div class="banquan">
                                <a href="#">关注问题</a>
                                <a href="#">5条评论</a>
                                <a href="#">作者保留权利</a>
                            </div>
                        </div>
                    </div>
                </div>
                {% comment %}{% endfor %}{% endcomment %}
            </div>
    </div>
</div>

<!-- ----- 提问的弹出框 ----- -->
<div class="Modal-wrapper" id="Modal-wrapper">
    <div class="Modal-backdrop"></div>
    <div class="Modal-large">
        <div class="Modal-inner">

            <!-- 点击关闭按钮，调用hideModel函数 -->
            <span class="guanbi" onclick="closeWin()">X</span>

            <h3 class="Modal-title">写下你的问题</h3>
            <div class="Modal-subtitle">描述精确的问题更易得到解答</div>
            <div class="Modal-content">
                <div class="askquestion">
                    <form action="/app1/doquestions/" method="post">
                        <div class="QuestionAsk-section">
                            <div class="asktitle">
                                <textarea required="required" rows="2" name="title" class="Input" placeholder="问题标题"></textarea>
                            </div>
                        </div>
                        <div class="QuestionAsk-section">
                            <div class="asktitle">
                                <input class="Input" type="text" name="huati" placeholder="添加话题"/><span class="icon-search"></span>
                            </div>
                        </div>
                        <div class="QuestionAsk-section">
                            <div class="askhead">问题描述(可选)：</div>
                            <div class="asktitle">
                                <textarea required="required" rows="2" name="miaoshu" class="Input" placeholder="问题背景、条件等详细信息"></textarea>
                            </div>
                        </div>
                        <div class="QuestionAsk-section">
                            <div class="chec"><input type="checkbox" name="nimimg" class="checkbox"/>匿名提问</div>
                        </div>
                        <div class="tijiao">
                            <button class="tijiaobtn" type="submit">提交问题</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 提问的弹出框结束 -->

</body>
</html>